<template>
    <div class="page">

        <div class="header">
            <router-link to="/my-income" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">{{expect ? '预计收益' : '累计收益'}}</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="list">
            <div  class="list-item" v-for="item in recordArr">
                <div class="list-item-head">
                    <img class="list-item-head-avatar" :src="item.portrait || avater"/>
                    <div class="list-item-head-title">{{item.consumption_member_name}}</div>
                    <div v-if="item.cash_back == 1" class="list-item-head-price">
                        <span class="cashBack">拼游返现：</span>{{item.money}} 元
                    </div>
                    <div v-else class="list-item-head-price">
                        <span v-if="expect">预计收益：</span>{{expect ? '' : '+'}}{{item.money}} 元
                    </div>
                </div>
                <div class="list-item-desc">消费金额：{{item.consumption_money}} 元</div>
                <div class="list-item-desc">消费时间：{{item.consumption_time}}</div>
                <div class="list-item-name"><span>消费商品：</span><router-link :to="'./show/'+item.consumption_goods" >{{item.goods_name}}</router-link></div>
            </div>
        </div>
        <div class="h120"></div>
    </div>
</template>

<script>
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    export default {
        name: "My-income-total",
        data(){
            return{
                url:config.url,
                avater:require('../assets/user-avatar.png'),
                recordArr:[],
                expect: false,
            }
        },
        methods:{
            getData(){
                let url =  this.expect ? 'wap/realname/expectincome' : 'income';
                this.axios.post(url)
                    .then(res => {
                        this.recordArr = res.data
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的收益-累计收益', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.expect = this.$route.query.expect;
            this.getData();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30{height: rpx(30);}
    .h120{height: rpx(120);}
    .page{
        background: $bgcolor1;
        min-height: 100%;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }



    //项列表
    .list{
        &-item{
            margin-bottom: rpx(30);
            background: $color0;
            &-head{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding:rpx(30) rpx(30) rpx(10);
                &-avatar{
                    width: rpx(64);
                    height: rpx(64);
                    border-radius: 50%;
                }
                &-title{
                    flex: 1;
                    padding: rpx(20);
                    font-size: rpx(30);

                }
                &-price{
                    font-size: rpx(36);
                    color: $color3;
                    span{
                        font-size: rpx(24);
                    }
                    span.cashBack{
                        color: #219865;
                    }
                }
            }
            &-desc{
                padding: rpx(10) rpx(30) rpx(10) rpx(114);
                font-size: rpx(24);
                color: $color5;
            }
            &-name{
                margin-top: rpx(30);
                padding: rpx(20) rpx(30);
                border-top: solid 1px $color2;
                border-bottom: solid 1px $color2;
                background:#fffbf2;
                font-size: rpx(24);
                color: $color3;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space:nowrap;
                span{
                    color: $color5;
                }
                a{
                    color: $color3;
                }
            }
        }
    }


</style>